<template>
    <div class="me">
        <div class="headInfo">
            <div class="head-img"></div>
            <div class="head-profile">
                <p class="user-id h5lineHeight" v-if='$store.getters.userLogin'>{{$store.getters.userLogin}}</p>
                <p class="user-id h5lineHeight" v-else @click="$router.push('/login')">{{this.title}}</p>
                    <span>大漠孤烟直，干饭不能迟</span>
            </div>
            <i class="fa fa-angle-right"></i>
        </div>
        <div class="address-cell">
            <i class="fa fa-map-marker"></i>
            <div class="address-index" @click="myAddress">
                <span>我的地址</span>
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
        <div class="address-cell" style="margin-top: 0;">
            <i class="fa fa-arrow-circle-left"></i>
            <div class="address-index" @click="$router.push('/login')">
                <span>退出登录</span>
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
        <!-- 45px遮盖tabbar -->
        <div style="height: 45px;"></div>
        <tabBar :data='tabBarData'/>
    </div>
  </template>

<script>
    import tabBar from '../components/tabBar.vue'
    export default {
        name: 'me',
        data() {
            return {
                tabBarData: [{
                    title: "首页",
                    icon: 'home',
                    path: '/home'
                }, {
                    title: "订单",
                    icon: 'file-text-o',
                    path: '/order'
                }, {
                    title: "我的",
                    icon: 'user',
                    path: '/me'
                }],
                title: "点我登陆"
            }
        },
        methods: {
            myAddress() {
                this.$router.push('/myAddress')
            },
        },
        components: {
            tabBar
        }
    }
</script>
<style scoped>
    .h5lineHeight {
        /* 解决不同移动端字体偏上 */
        display: flex;
        align-items: center;
        justify-content: left;
        line-height: normal;
    }
    
    .me {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }
    
    .headInfo {
        display: flex;
        background-image: linear-gradient(90deg, #0af, #0085ff);
        padding: 6.666667vw 4vw;
        color: #fff;
        align-items: center;
    }
    
    .head-img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-position: 0px 0px;
        background-size: 60px;
        background-image: url(https://shadow.elemecdn.com/faas/h5/static/sprite.3ffb5d8.png);
    }
    
    .head-profile {
        overflow: hidden;
        margin-left: 4.8vw;
        flex-grow: 1;
    }
    
    .head-profile .user-id {
        max-width: 40vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 1.3rem;
        margin-bottom: 2.133333vw;
        font-weight: 700;
        display: flex;
        align-items: center;
    }
    
    .head-profile .user-phone {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
    }
    
    .user-phone>i {
        margin-right: 0.666667vw;
        font-size: 1rem;
    }
    
    .headInfo>i {
        font-size: 1.2rem;
    }
    
    .address-cell {
        margin-top: 2.666667vw;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        font-size: 1rem;
        line-height: 4.533333vw;
        background: #ffffff;
        display: flex;
        align-items: center;
        padding-left: 6.666667vw;
        color: #333;
    }
    
    .address-cell>i {
        font-size: 1.3rem;
        color: rgb(74, 165, 240);
        margin-right: 2.666667vw;
    }
    
    .address-index {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 3.733333vw 2.666667vw 3.733333vw 0;
        align-content: center;
    }
    
    .address-index>i {
        font-size: 1.3rem;
        color: #ccc;
    }
    
    .loginOut-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 3.733333vw 0;
        margin: 5.333333vw 0;
        color: #ff5339;
        border-radius: 0.8vw;
        font-size: 1rem;
        font-weight: 700;
        background-color: #fff;
        border: 0;
    }
</style>